<template>
  <el-dialog
    top="30px"
    title="详情"
    width="800px"
    append-to-body
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <el-button class="float-right m-1" @click="getData()" icon="el-icon-refresh" :loading="loading">
      刷新
    </el-button>
    <el-button
      class="float-right m-1"
      icon="el-icon-download"
      :loading="exportLoading"
      @click="exportExcel('常规28')"
    >
      导出
    </el-button>
    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData"></c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <view-dialog :visible.sync="viewVisible" :related-data="viewRow"></view-dialog>
  </el-dialog>
</template>

<script>
import { exportTable } from '@/bank/plugins/export'
import ViewDialog from '@/bank/views/business/count/ViewDialog'
export default {
  components: { ViewDialog },
  props: {
    visible: Boolean,
    otherParams: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      tableName: 'customer_related',
      loading: false,
      tableData: [],
      totalCount: 0,
      params: {
        index: 1,
        size: 10,
      },
      tableColumns: [
        {
          attrs: { label: '借款客户', prop: 'customer_name', minWidth: '120px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        { attrs: { label: '联系人', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center' } },
        { attrs: { label: '客户类型', prop: 'org_class_name', align: 'center' } },
        { attrs: { label: '担保(放款)金额(万元)', prop: 'reply_funds', align: 'center' } },
        { attrs: { label: '放款银行', prop: 'bank_name', align: 'left', minWidth: '90px' } },
        {
          attrs: { label: '放款日期', prop: 'load_date', align: 'center', minWidth: '100px' },
        },
        {
          attrs: { label: '还款日期', prop: 'load_end_date', align: 'center', minWidth: '100px' },
        },
        { attrs: { label: '创建时间', prop: 'create_time', align: 'left', minWidth: '90px' } },
        {
          attrs: { label: '操作', align: 'center', width: 80, fixed: 'right' },
          operations: [{ content: '查看', icon: 'fa fa-search', event: this.handleView }],
        },
      ],
      exportLoading: false,

      viewVisible: false,
      viewRow: {},
    }
  },
  computed: {},
  watch: {
    otherParams: {
      handler: function () {
        this.getData()
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    handleView(row) {
      this.viewRow = row
      this.viewVisible = true
    },
    exportExcel(name) {
      this.exportLoading = true
      const { index, size, ...params } = this.params
      exportTable({
        columns: this.tableColumns,
        table: this.tableName,
        params: { ...params, ...this.otherParams },
        order: {},
        adapter: this.dataAdapter,
        filename: name,
      }).finally(() => {
        this.exportLoading = false
      })
    },
    dataAdapter(item) {
      item.load_date = this.$utils.dateFormat(item.load_date, 'yyyy-MM-dd')
      item.load_end_date = this.$utils.dateFormat(item.load_end_date, 'yyyy-MM-dd')
      return item
    },
    getData() {
      if (!this.otherParams['bank_id.eq']) {
        return
      }
      this.loading = true
      this.$api
        .getData(
          this.$serviceName,
          this.tableName,
          { ...this.otherParams, ...this.params },
          { create_time: 'desc' }
        )
        .then(res => {
          this.tableData = res?.data?.data ?? []
          this.totalCount = res?.data?.totalCount ?? 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style lang="scss" scoped></style>
